<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <base href="<%=basePath%>">
  <meta charset="utf-8">
  <title>产品查询</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="layuiadmin/style/admin.css" media="all">
  <style type="text/css">
	 /*表格单选框居中 */
	.layui-table-cell .layui-form-radio {
		position: relative;
		top: 50%;
	}
	/* 禁止刷新后出现横向滚动条 */
	body{overflow-y: scroll;} 
  </style>
</head>
<body>
  <div class="layui-fluid">
  <div class="layui-row layui-col-space10">
	  <div class="layui-col-md12">
	    <div class="layui-card">
	      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
	        <div class="layui-form-item">
	          <div class="layui-inline">
	            <label class="layui-form-label">产品编号</label>
	            <div class="layui-input-inline">
	              <input type="text" name="productcode" placeholder="请输入" autocomplete="off" class="layui-input">
	            </div>
	          </div>
	          <div class="layui-inline">
	            <label class="layui-form-label">产品名称</label>
	            <div class="layui-input-inline">
	              <input type="text" name="productname" placeholder="请输入" autocomplete="off" class="layui-input">
	            </div>
	          </div>
	          <div class="layui-inline">
	            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-product-contlist-search">
	              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
	            </button>
	          </div>
	        </div>
	      </div>
	      <div class="layui-card-body">
	       
	        <table id="LAY-product-content-list" lay-filter="LAY-product-content-list"></table> 
	        <script type="text/html" id="toolbarDemo">
  			<div class="layui-btn-container">
<!--
    			<button class="layui-btn layuiadmin-btn-list" lay-event="batchdel">批量删除</button>
 -->
    			<button class="layui-btn layuiadmin-btn-list" lay-event="add">添加产品型号</button>
  			</div>
		</script>
		 <script type="text/html" id="table-content-list">
			 <!--
          		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add"></i>添加工序</a>
			-->
         	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
           <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
	    <script type="text/html" id="workordertable-content-list">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
 		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
	      </div>
	    </div>
	 </div>

	  <!--

	  <div class="layui-col-md8">
          <div class="layui-card">
            <div class="layui-card-header">工序信息</div>
            <div class="layui-card-body">
              <table id="LAY-workorder-content-list" lay-filter="LAY-workorder-content-list"></table> 
            </div>
        </div>
     </div>
	 
	 <div class="layui-col-md4">
          <div class="layui-card">
            <div class="layui-card-header">问题信息</div>
            <div class="layui-card-body">
              <table id="LAY-problem-content-list" lay-filter="LAY-problem-content-list"></table> 
            </div>
        </div>
     </div>

	 -->

  </div>

  <script src="layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: 'layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'contlist', 'table', 'laydate'], function(){
    var table = layui.table
    ,admin = layui.admin
    ,laydate = layui.laydate
    ,form = layui.form;
    
    laydate.render({
		elem: '#date', //弹出页的指定元素生日时期需要为时间格式
	});
    
    table.render({
         elem: '#LAY-product-content-list'
        ,url:'product/findListJson/'
        ,toolbar: '#toolbarDemo'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,cols: [[
           {type:'radio'}
		  ,{type:'numbers', title: '序号'}
		  ,{field:'productcode', title: '产品编号', sort: true}
          ,{field:'productname', title: '产品名称', sort: true}
          ,{field:'productunit', title: '产品计量单位'}
          ,{fixed: 'right', title:'操作', toolbar: '#table-content-list', width:200}
        ]]
    	,page: true
    	,page: true
    	,limits: [5,10,50]
        ,limit: 5 //每页默认显示的数量
    	,done: function(res, curr, count){
    		initWorkorderTable();
    	}
	    ,parseData: function(res){ //res 即为原始返回的数据
	    	if(res.data[0] != undefined){
	    		res.data[0].LAY_CHECKED=true
	 	       return {
	 	         "code": res.code, //解析接口状态
	 	         "msg": res.msg, //解析提示文本
	 	         "count": res.count, //解析数据长度
	 	         "data": res.data //解析数据列表
	 	       };
	    	}
	     }
      });
    
    //监听搜索
    form.on('submit(LAY-product-contlist-search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('LAY-product-content-list', {
        where: field
        ,page: {
            curr: 1 //重新从第 1 页开始
        }
      });
    });
    
    //监听产线行单击事件（双击事件为：rowDouble）
    table.on('row(LAY-product-content-list)', function(obj) { //注：test是table原始容器的属性 lay-filter="对应的值"
    	var data = obj.data;
    	//选中行样式
    	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    	//选中radio样式
    	obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    	
    	//重载工具表格数据
        table.reload('LAY-workorder-content-list', {
          where: {productcode:data.productcode}
        });
    });
    
    
    //监听表格事件
    table.on('tool(LAY-product-content-list)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.id + ' 的查看操作');
      } else if(obj.event === 'del'){
        layer.confirm('确定删除 '+data.productcode + '?', function(index){
        	layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
        	admin.req({
        		url: 'product/delete' //实际使用请改成服务端真实接口
       	        ,data: data
       	        ,done: function(res){
       	         	if(res.flag==1){
       	         		layer.msg('删除成功');
       			  	}else{
       			  		layer.msg('删除失败');
       			  	}
       	         	table.reload('LAY-product-content-list');
       	         }
             });
        });
      } else if(obj.event === 'edit'){
    	  layer.open({
              type: 2
              ,title: '修改产品'
              ,content: 'product/updateInit?id='+data.id
              ,maxmin: true
              ,area: ['900px', '500px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-product-form-submit");
                submit.click();
              }
	          ,end: function () {
	          	table.reload('LAY-product-content-list');
	          }
            });
      }else if(obj.event === 'add'){
    	  layer.open({
              type: 2
              ,title: '添加工序'
              ,content: 'workorder/addInit?productcode='+data.productcode
              ,maxmin: true
              ,area: ['900px', '500px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-workorder-form-submit");
                submit.click();
              }
	          ,end: function () {
	          	table.reload('LAY-workorder-content-list');
	          }
            });
      }
    });
    
    //头工具栏事件
    table.on('toolbar(LAY-product-content-list)', function(obj){
      
      switch(obj.event){
        case 'batchdel': //批量删除
        	var ids = [];//封装批量删除的ID
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            
            if(data.length === 0){
                return layer.msg('请选择数据');
            }
	        layer.confirm('确定批量删除选中项 ?', function(index){
	        	layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
	          	admin.req({
	          		    url: 'product/deleteBatch' //实际使用请改成服务端真实接口
	         	        ,data: JSON.stringify(data)
	         	        ,type: 'POST'
	         	        ,contentType: "application/json;charset-UTF-8"
	         	        ,done: function(res){
	         	         	if(res.flag==1){
	         	         		layer.msg('删除成功');
	         			  	}else{
	         			  		layer.msg('删除失败');
	         			  	}
	         	         	//关闭网页
	        	          	layer.close(index);
	         	         	table.reload('LAY-product-content-list');
	         	         }
	               });
	        });
        break;
        case 'add':  //添加
        	layer.open({
                type: 2
                ,title: '添加产品型号'
                ,content: 'product/addInit'
                ,maxmin: true
                ,area: ['900px', '500px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  //点击确认触发 iframe 内容中的按钮提交
                  var submit = layero.find('iframe').contents().find("#layuiadmin-product-form-submit");
                  submit.click();
                }
	        	,end: function () {
	        		table.reload('LAY-product-content-list');
	            }
              });
        break;
      };
    });
    
    
  //初始化工序信息
  function initWorkorderTable(){
    	 //初始化工位机信息
        table.render({
            elem: '#LAY-workorder-content-list'
            ,url:'product/findWorkorderListJson/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,where:selectProductcode()
            ,limit:10
            ,limits:[10,20,30,40,50,60,70,80,90]
            ,cols: [[
               {type:'radio'}
      		  //,{field:'ordercode', title: '工序编号', sort: true}
      		  ,{field:'ordername', title: '工序名称', sort: true}
      		  ,{field:'filepath', title: '视频文件路径', sort: true, width:400}
      		  ,{field:'serialnumber', title: '顺序号', sort: true, edit: 'text'}
              ,{fixed: 'right', title:'操作', toolbar: '#workordertable-content-list', width:150}
      		 
            ]]
        	,page: true
        	,limits: [5,10,50]
            ,limit: 5 //每页默认显示的数量
            ,done: function(res, curr, count){
        		//initProblemTable();
        	}
    	    ,parseData: function(res){ //res 即为原始返回的数据
    	    	if(res.data[0] != undefined){      
    	    		res.data[0].LAY_CHECKED=true
    		        return {
    		         "code": res.code, //解析接口状态
    		         "msg": res.msg, //解析提示文本
    		         "count": res.count, //解析数据长度
    		         "data": res.data //解析数据列表
    		       };
    	    	}
    	     }
        });
    };
  
 //监听产线行单击事件（双击事件为：rowDouble）
  table.on('row(LAY-workorder-content-list)', function(obj) { //注：test是table原始容器的属性 lay-filter="对应的值"
  	var data = obj.data;
  	//选中行样式
  	obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
  	//选中radio样式
  	obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
  	
  	//重载工具表格数据
      table.reload('LAY-problem-content-list', {
        where: {ordercode:data.ordercode}
      });
  });
  
    //监听单元格编辑
    table.on('edit(LAY-workorder-content-list)', function(obj){
      var value = obj.value //得到修改后的值
      ,data = obj.data //得到所在行所有键值
      ,field = obj.field; //得到字段
      
      //layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
      
      if(!(/(^[1-9]\d*$)/.test(value))){
    	    layer.msg('只能输入正整数！');
    	    return;
      }
      
      layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
      
      admin.req({
  		url: 'product/updateOrdering' //实际使用请改成服务端真实接口
 	        ,data: data
 	        ,done: function(res){
 	         	if(res.flag==1){
 	         		layer.msg(res.msg);
 			  	}else{
 			  		layer.msg('保存失败');
 			  	}
 	         	table.reload('LAY-workorder-content-list');
 	         }
       });
  });
 
  //监听表格事件
    table.on('tool(LAY-workorder-content-list)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){
        layer.msg('ID：'+ data.id + ' 的查看操作');
      } else if(obj.event === 'del'){
        layer.confirm('确定删除 '+data.ordername + '?', function(index){
        	layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
        	admin.req({
        		url: 'workorder/delete' //实际使用请改成服务端真实接口
       	        ,data: data
       	        ,done: function(res){
       	         	if(res.flag==1){
       	         		layer.msg('删除成功');
       			  	}else{
       			  		layer.msg('删除失败');
       			  	}
       	         	table.reload('LAY-workorder-content-list');
       	         }
             });
        });
      } else if(obj.event === 'edit'){
    	  layer.open({
              type: 2
              ,title: '修改工序'
              ,content: 'workorder/updateInit?id='+data.id +'&productworkorderid='+data.productworkorderid
              ,maxmin: true
              ,area: ['900px', '500px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                //点击确认触发 iframe 内容中的按钮提交
                var submit = layero.find('iframe').contents().find("#layuiadmin-workorder-form-submit");
                submit.click();
              }
	          ,end: function () {
	          	table.reload('LAY-workorder-content-list');
	          }
            });
      }
    });
    
  
  //将表单数据转为json
	function selectProductcode(){
		//获取选中的流水线
		var checkStatus = table.checkStatus('LAY-product-content-list');
	    var data = checkStatus.data;
	    var productcode = -100
	    if(data[0] != undefined){
	    	productcode = data[0].productcode;
	    }
	    if(productcode == undefined){
	    	productcode = -100;
	  	}
		var json = {
			productcode:productcode,
		};
		return json;
	};
  
  //初始化工序信息
    function initProblemTable(){
      	 //初始化工位机信息
          table.render({
              elem: '#LAY-problem-content-list'
              ,url:'workorder/findProblemListJson/'
              ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
              ,where:selectWordercode()
              ,limit:5
              ,limits:[5,10,50]
              ,cols: [[
        		   {type:'numbers', title: '序号'}
        		  ,{field:'problemcode', title: '问题编号', sort: true}
        		  ,{field:'problemname', title: '问题名称', sort: true}
              ]]
          	,page: true
          });
      };
    
      //将表单数据转为json
  	function selectWordercode(){
  		//获取选中的流水线
  		var checkStatus = table.checkStatus('LAY-workorder-content-list');
  		var ordercode = -100;
  	    var data = checkStatus.data;
  	    if(data[0] != undefined){
  	    	var ordercode = data[0].ordercode;
  	  	    if(ordercode == undefined){
  	  	    	ordercode = -100;
  	  	  	}
  	    }else{
  	    	ordercode = -100;
  	    }
  	    var json = {
  			ordercode:ordercode,
  		};
  		return json;
  	};
    
});
  
  </script>
</body>
</html>